<template>
  <j-modal
    title="打印"
    :width="1000"
    :visible="visible"
    @cancel="handleCancel"
    @ok="handleOk"
    :footer="null"
    @update:fullscreen="isFullscreen"
    wrapClassName="j-depart-select-modal"
    :switchFullscreen="true"
    cancelText="关闭"
    okText="打印">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" >
          <a-row :gutter="24">
            <a-col :xl="6" :lg="7" :md="8" :sm="12">
              <a-form-item label="宽度">
                <a-radio-group v-model="imgWidth" @change="onImgWidthChange">
                  <a-radio :value="1">拉伸</a-radio>
                  <a-radio :value="2">默认</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="12">
              <a-form-item label="分页">
                <a-radio-group v-model="imgPage" @change="onImgPageChange">
                  <a-radio :value="1">单张</a-radio>
                  <a-radio :value="2">默认</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="12">
              <a-button v-print="'#printHtml'" ghost type="primary">打印</a-button>&nbsp;
              <a-button @click="clear" ghost type="primary">清空</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-divider orientation="left">打印预览 （{{imgList.length}}张）</a-divider>
      <div ref="printHtml" id="printHtml" class="content">
        <div style="min-height: 200px;text-align: center;line-height: 200px;"
          @drop="drop($event)"
          @dragover="allowDrop($event)"
        >
          <div v-for="(item,index) in imgList" :style="{
            height:((item.rotate/90)%2==0?item.height:item.width )+'mm',
            display: 'flex',
            alignItems: 'center',
            pageBreakAfter:(imgPage==1 && index != (imgList.length-1) ?'always':'auto')}">
            <img :src="item.src"
                 @dblclick="rotate(item)"
                 :style="{ width:(item.width+'mm'),
                        height:(item.height+'mm'),
                        transform:'rotate('+item.rotate+'deg)',
                        margin: 'auto'}"/>
          </div>
          <p> </p>
          <span v-if="imgList.length==0">请将图片拖拽到此处</span>
        </div>
      </div>
  </j-modal>
</template>

<script>
export default {
  name: 'VcaPrintLocalImg',
  data(){
    return {
      title:"",
      imgWidth:2,
      imgPage:1,
      imgList:[],
      visible:false
    }
  },
  mounted() {
    document.ondragover = function (e) {
      e.preventDefault() //阻止拖放的图片在新窗口中直接显示,拖放的目标对象此时是document对象
    }
    document.ondrop = function (e) {
      e.preventDefault() //阻止 document.ondrop的默认行为  *** 在新窗口中打开拖进的图片
    }
  },
  methods: {
    init(record) {
      this.visible = true;
    },
    allowDrop(e) {
      e.preventDefault()
    },
    resetWH(data,rotate){
      let width = data.oriWidth;
      let height = data.oriHeight;
      data.rotate = rotate && width>height?90:0;
      if(this.imgWidth==1){
        data.width = 210;
        data.height = 260;
      }else {
        if (data.rotate == 90) {
          let tmp = width;
          width = height;
          height = tmp;
        }
        let rate = width / height;
        let a4Rate = 210 / 297;
        if (rate > a4Rate) {//以宽为主
          data.width = Math.min(width, 210);
          data.height = data.width / rate;
        } else {//以高为主
          data.height = Math.min(height, 260);
          data.width = data.height * rate;
        }
        if (data.rotate == 90) {
          let tmp = data.width;
          data.width = data.height;
          data.height = tmp;
        }
      }
      return data;
    },
    drop(e) {
      let files = [];
      [].forEach.call(
        e.dataTransfer.files,
        function (file) {
          files.push(file)
        },
        false
      );
      for (let file of files) {
        let reader = new FileReader();
        reader.readAsDataURL(file)
        reader.onload = () => {
          let img = new Image();
          img.src = reader.result;
          img.onload = ()=>{
            let data = {
              src:reader.result,
              oriWidth:img.width,
              oriHeight:img.height,
            }
            this.imgList.push(this.resetWH(data,true));
          }
        }
      }
    },
    clear(){
      this.imgList.splice(0,this.imgList.length);
    },
    onImgWidthChange(){
      this.imgList.forEach(item=>{
        this.resetWH(item,true);
      });
    },
    rotate(img){
      let currentRotate = img.rotate;
      this.resetWH(img,(currentRotate/90)%2==0);
      img.rotate = currentRotate+90;
    },
    onImgPageChange(){

    },
    handleOk(){

    },
    handleCancel(){
      this.visible=false;
      this.imgList.splice(0,this.imgList.length);
    },
    isFullscreen(val){
      this.fullscreen=true;
    }
  },
}
</script>
<style scoped>

</style>